<!--  -->
<template>
  <div class="order-list">
      <HeaderTop title="合伙人列表"></HeaderTop>
      <div class="order-container">
        <div class="order-search">
          <!-- 昵称 -->
          <div class="order-date">
            <span class="title">昵称：</span>
            <el-input
              placeholder="请输入内容"
              v-model="value1"
              class="input">
            </el-input>
          </div>
          <!-- 手机号 -->
          <div class="order-state">
            <span class="title">手机号：</span>
            <el-input
              placeholder="请输入内容"
              v-model="value2"
              class="input">
            </el-input>
          </div>
          <!-- 级别 -->
          <div class="order-pay">
            <span class="title">级别：</span>
            <el-select v-model="value3" placeholder="请选择" class="select">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                >
              </el-option>
            </el-select>
          </div>
          <el-button class="order-btn" plain @click="search()">搜索</el-button>
        </div>

        <div class="order-mian">
          <!-- 订单表格 -->
          <el-table max-height="700" class="order-table" :data="tableData" v-loading="loading" style="width: 100%" :span-method="objectSpanMethod">
            <el-table-column prop="userId" label="用户编号"></el-table-column>
            <el-table-column prop="avatar" label="头像">
               <template slot-scope="scope">
                 <img style="width:40px;height:40px;border-radius:50%" src="../../assets/img/tx.jpg" alt="">
               </template>
            </el-table-column>
            <el-table-column prop="username" label="昵称"></el-table-column>
            <el-table-column prop="plate" label="平台账号"></el-table-column>
            <el-table-column prop="phone" label="绑定手机号"></el-table-column>
            <el-table-column prop="level" label="级别"></el-table-column>
            <el-table-column prop="topLevel" label="上级"></el-table-column>
            <el-table-column prop="totalIncome" label="累计收入(元)"></el-table-column>
            <el-table-column prop="orderdetail" class="order-detail" label="操作">
              <template slot-scope="scope">
                <el-button size="small" @click="toOrder(tableData[scope.$index].userId)">查看订单</el-button>
                 <Modal class="model" v-model="modal1" width="1014" height="669" :mask-closable="false" :styles="{top:'230px',left:'180px'}">
                  <div v-if='tableData2' v-for='(item,index) in tableData2' :key='index'>
                  <p slot="header" style="width:1012px;height:62px;line-height:62px;font-size:18px;background:rgb(250,250,250);padding:0;border-bottom:1px solid #E0E0E0">
                    <span>订单详情</span>
                  </p>
                  <div class="main" style="line-height:35px;display:flex;flex-wrap:wrap;width:850px;margin:0 60px;font-size:18px;font-weight:bold">
                    <p style="width:40%">订单编号：<span>{{item.orderNo}}</span></p>
                    <p style="width:30%">下单时间：<span>{{item.createTime?item.createTime.split(' ')[0]:''}}</span></p>
                    <p style="width:30%">订单完成时间：<span>{{item.orderSettlementTime?item.orderSettlementTime.split(' ')[0]:''}}</span></p>
                    <p style="width:40%">买家姓名：<span>{{item.receiverName}}</span></p>
                    <p style="width:30%">支付方式：<span>{{item.payChannel}}</span></p>
                    <p style="width:30%">支付时间：<span>{{item.paidTime?item.paidTime.split(' ')[0]:''}}</span></p>
                    <p style="width:40%">支付流水单：<span>{{item.payTradeNo?item.payTradeNo:''}}</span></p>
                    <p style="width:30%">订单状态：<span>{{item.orderStatus}}</span></p>
                  </div>
                  <el-table size="small" show-summary :data="item.orderDetailList" border style="width: 850px;margin:0 60px">
                    <el-table-column prop="orderId" label="序号" width="80"></el-table-column>
                    <el-table-column prop="goodsNo" label="商品编号"></el-table-column>
                    <el-table-column prop="goodsName" label="商品名称"></el-table-column>
                    <el-table-column prop="goodsPrice" label="单价" width="100"></el-table-column>
                    <el-table-column prop="goodsNum" label="数量" width="100"></el-table-column>
                  </el-table>
                  <div class="total" style="display:flex;height:35px;line-height:35px;width:850px;border:1px solid;margin:10px 60px;padding:0 20px;">
                    <p>商品总金额：<span>{{item.orderAmountTotal}}</span></p>
                    <p>+运费：<span>{{item.espressFee?item.espressFee:''}}</span></p>
                    <p>-优惠：<span>{{item.deductionMoney?item.deductionMoney:0}}</span></p>
                    <p style="margin-left:400px"><span>订单合计金额：{{item.itemAmountTotal?item.itemAmountTotal:''}}</span></p>
                  </div>
                  <div slot="footer" style="font-size:18px;width:850px;margin:25px 60px 20px;">
                    <div class="address" style="display:flex;justify-content:space-between">
                      <p>收货方名称：<span>{{item.receiverName}}</span></p>
                      <p>联系方式：<span>{{item.receiverPhone?item.receiverPhone:''}}</span></p>
                      <p>收货地址：<span>{{item.receiverArea?item.receiverArea:''}} {{item.receiverAddress}}</span></p>
                    </div>                  
                 </div>
                  </div>
                  <div @click='getMoreList' v-if='!allloaded' class='tip'>点击加载更多</div>
                  <div v-else  class='tip'> 已加载全部</div>
                </Modal>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <div class="block">
            <el-pagination class='pagenation'  v-if='tableData&&tableData.length>0'
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="num"
              layout="total, prev, pager, next, jumper"
              :page-size="size"
              :total="totalSize">
            </el-pagination>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
import HeaderTop from '../../components/HeaderTop.vue'
export default {
  data () {
    return {
      modal1:false,
      currentPage1: 1,
      value1:'',
      num:1,
      size:10,
      userId:'',
      token:'',
      nickName:'',
      phone:'',
      level:0,
      totalSize:null,
      options: [{
          value: '0',
          label: '全部'
        }, {
          value: '1',
          label: '支付宝'
        }, {
          value: '2',
          label: '微信'
        }, {
          value: '3',
          label: '线下支付'
        }],
      value2: '',
      value3: '',
      listNum:1,
      tableData:[],
      orderStatus:[{"name":"待付款",status:1},{"name":"待发货",status:2},{"name":"待收货",status:3},{"name":"待评价",status:4},{"name":"订单完成",status:5},{"name":"已退款",status:6},{"name":"退款审核中",status:7},{"name":"拒绝退款",status:8},{"name":"退款中",status:9}],
      payChannels:[{"name":"支付宝",status:1},{"name":"微信",status:2},{"name":"财务确认",status:3},{"name":"无",status:4}],
      // tableData2: [{
      //     index: 1,
      //     goodsnum:'001',
      //     goodsname:'养生茶',
      //     price:95.00,
      //     num:3
      //   },{
      //     index: 2,
      //     goodsnum:'002',
      //     goodsname:'养生茶',
      //     price:95.00,
      //     num:3
      //   },{
      //     index: 3,
      //     goodsnum:'003',
      //     goodsname:'养生茶',
      //     price:95.00,
      //     num:3
      //   },{
      //     index: 4,
      //     goodsnum:'004',
      //     goodsname:'养生茶',
      //     price:95.00,
      //     num:3
      //   }],
        tableData2:[],
        allloaded:false,
        loading:true
    };
  },

  components: {
    HeaderTop
  },

  computed: {},
  created(){
    this.userId = sessionStorage.getItem('userId')
    this.token = sessionStorage.getItem('token')
    this.getPartnerList() 
  },
  methods: {
    async getPartnerList(){
       let params = {
          managerInfoId:this.userId,
          token:this.token,
          nickName:this.nickName,
          num:this.num,
          size:this.size,
          phone:this.phone,
          level:this.level
       }
       console.log(params)
        const result = await this.API.reqPartnerList(params)
        if(result.retCode == '000'){
          this.loading = false
          this.tableData = result.retData.partnerInfoSubs;
          this.totalSize = result.retData.count;
        }
    },
    search(){
       this.nickName = this.value1
       this.phone = this.value2
       this.level = this.value3
       this.getPartnerList();
    },
    //获取用户订单列表
    async getUserOrderList(id){
       this.id = id;
       let params = {
          token: sessionStorage.getItem('token'),
         'userId':id,
         'num':this.listNum,
         'size':this.size,
         'managerInfoId':this.userId,
       }
        console.log('params',params)
        let result = await this.API.reqUserOrderList(params)
        
        if(result.retCode == '000'){
          if(result.retData.orderInfoSubs.length==0){
            if(this.listNum == 1){
             this.$message('该用户没有订单')
            }
            this.allloaded = true
            return
          }else{
            this.modal1 = true
            console.log(result.retData.orderInfoSubs)
            result = result.retData.orderInfoSubs
            console.log('result',result)
            result.forEach(item=>{
            item.orderStatus = this.orderStatus.filter(it=>{
                 return  it.status == item.orderStatus
          
            })[0].name
            item.payChannel = this.payChannels.filter(it=>{
               return it.payChannel = item.payChannel
            })[0].name
        })
            this.tableData2 = this.tableData2.concat(result?result:[]);
          }
        }
       
        console.log('userOrderList',this.tableData2)
    },
    async getMoreList(){
      this.listNum++;
      this.getUserOrderList(this.id)
    },
    toOrder(id){
        this.allloaded = false
        this.tableData2 = []
        this.listNum = 1
        this.getUserOrderList(id)
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }){
      // 合并单元格逻辑
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
     this.num = val
     this.getPartnerList()
    }
  }
}

</script>
<style lang='stylus'>
  .ivu-modal-mask
    background rgba(210,210,210,.1)
  .ivu-modal-content
    overflow hidden
    .ivu-modal-header
      padding 0
      border none
      span
        margin-left 10px
        font-weight bold
    .ivu-modal-footer
      border none
</style>

<style lang='stylus' scoped>
.order-list
  height 100%
  .order-container
    height 100%
    .order-search
      height 90px
      display flex
      align-items center
      .title
        color #fff
        font-size 19px
      .input
        width 140px
      .select
        width 130px
      .order-state,
      .order-pay,
      .order-btn
        margin-left 25px
    .order-mian
      position relative
      height 763px
      .order-table
        border-top-left-radius 15px
        border-top-right-radius 15px
        .main
          color red
     
.tip
  width 100%
  text-align center
.pagenation 
  posItion absolute 
  bottom 20px
  left 50%
  transform  translateX(-50%)
</style>